<!--
 * @name PageTop
 * @description 顶部导航栏
 * @author idouya
 * @email elegentfrog@163.com
 * @date 2025-05-09
 -->

<template>
  <div class="p-page-top">
    <div class="page-header">
      <div class="header-left">
        <div>
          <img @click="gotoMenu" src="@/assets/img/logo.png" alt="" height="32px" />
        </div>
        <div class="title">{{ title }}</div>
      </div>
      <div class="header-right" v-if="showIcon">
        <i class="iconfont fencing-wangluoxinhao"></i>
        <i class="iconfont fencing-fanhuiyou go-back" @click="goBack"></i>
        <img
          class="screen"
          @click="setSreen"
          src="@/assets/svg/full-screen.svg"
          width="30px"
          height="30px"
          alt=""
          srcset=""
          v-if="!isFull"
        />
        <img
          v-else
          class="screen"
          @click="setSreen"
          src="@/assets/svg/exit-screen.svg"
          width="21px"
          height="21px"
          alt=""
          srcset=""
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import Storage from '@/assets/js/storage'
import { enterFullscreen, isFullscreen, exitFullscreen } from '@/assets/js/fullscreen'

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()

const isFull = ref(false)

const props = defineProps({
  // props
  title: {
    type: String,
    default: 'Fencing',
  },
  showIcon: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['gotoUrl'])

onBeforeMount(() => {})
onMounted(() => {
  isFull.value = isFullscreen()
})

const gotoMenu = () => {
  router.push({
    name: 'home',
  })
}

const goBack = (name) => {
  emit('gotoUrl', { name: name })
}

const setSreen = () => {
  if (isFull.value) {
    exitFullscreen()
    isFull.value = false
  } else {
    enterFullscreen()
    isFull.value = true
  }
}
</script>

<style scoped lang="scss">
.p-page-top {
  .page-header {
    background-color: #01a7f0;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    color: #fff;
    font-size: 24px;

    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;

      img {
        cursor: pointer;
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 30px;

      .iconfont {
        font-size: 30px;
      }

      .go-back {
        cursor: pointer;
      }

      .screen {
        cursor: pointer;
      }
    }
  }
}
</style>
